<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>域名管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button type="primary" @click="adduservisible=true">新增域名</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column prop="domain" label="域名" align="center"></el-table-column>
        <el-table-column label="注册时间" align="center">
          <template slot-scope="scope">{{scope.row.time | timefilter}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              class="btn"
              type="danger"
              icon="el-icon-delete"
              v-if="scope.row.username!='admin'"
              @click="deletedomain(scope.row._id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 注册用户弹框   ===添加用户 -->
    <el-dialog title="新增域名" :visible.sync="adduservisible" width="40%">
      <el-form label-width="150px" :model="form" ref="form">
        <el-form-item label="域名" prop="domain" required>
          <el-input v-model="form.domain"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adduservisible = false">取 消</el-button>
        <el-button type="primary" @click="adddomains">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getdomainlist, adddomain, deletedomain } from "../axios/api";
import { deletemodal } from "../components/util";
export default {
  data() {
    return {
      tableData: [],
      adduservisible: false,
      form: {
        domain: "",
        time: Math.floor(Date.now() / 1000),
      },
    };
  },
  created() {
    this.getdomainlist();
  },

  filters: {
    timefilter(val) {
      var date = new Date(val * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
  },
  methods: {
    async getdomainlist() {
      const res = await getdomainlist();
      console.log(res);
      if (res.status == 200) {
        this.tableData = res.data.data;
      }
    },
    async show(row) {
      const response = await this.$http.delete("/auth/deuser", {
        data: {
          userid: row._id,
        },
      });

      if (response.status == 200) {
        this.$message.success("删除子码成功");
        this.getuserlist();
      }
    },
    //添加用户
    adddomains() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const res = await adddomain(this.form);
          // console.log(res);
          if (res.status == 201) {
            this.$message.success("新增域名成功");
            this.adduservisible = false;
            this.getdomainlist();
          } else {
            this.$message.error("新增域名失败");
          }
        } else {
          return this.$message.error("请输入合法的数据");
        }
      });
    },
    //删除用户
    async deletedomain(id) {
      const res = await deletemodal();
      if (!res) return;
      const response = await deletedomain({ id });
      if (response.status == 200) {
        this.$message.success("删除用户成功");
        this.getdomainlist();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.el-input {
  width:72%;
}
</style>